
import React, { useState, useEffect } from "react";
import Buttons from "../../componet/Button/button";
import Input from "../../componet/Input/InputComponent";
import axios from "../../axios";
import { useNavigate } from 'react-router-dom'
import "../../App.scss";
import { Button, Modal } from 'antd';


export default function LeadingBody() {
  const [data, setdata] = React.useState([])
  const navigate = useNavigate()
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const getls = async () => {
    const res = await axios.get('http://localhost:3000/wang')
    setdata(res.data)

  }
  // 删除
  const del = async (item: any) => {
    console.log(1);
    const res = await axios.delete(`http://localhost:3000/wangdel/?id=${item._id}`)
    if (res.data.code === 200) {
      getls()
    }
  }
  // 修改
  const upd = (item: any) => {
    setIsModalOpen(true);
    console.log(item);
    
  }

  useEffect(() => {
    getls()
  }, [])
  return (
    <div style={{overflow:'hidden',height:'90vh'}}>
      <div>

        <>
          <Modal title="修改信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <div style={{
            height: '200px', 
         
            }}>
              <div style={{marginBottom:'30px'}}>
                网络名称：
                <Input   width={'300px'} value="" onChange={(e) => { }}></Input>
              </div>

              <div style={{marginBottom:'30px'}}>
                创建时间：
                <Input width={'300px'} value="" onChange={(e) => { }}></Input>

              </div>
              <div style={{marginLeft:'14px'}}>
                创建人：
                <Input  width={'300px'} value="" onChange={(e) => { }}></Input>
              </div>
            </div>
          </Modal>
        </>
      </div>
      <div className="mxk-ldbz" >
        <div className="mxk-tzjgl-top">
          <Buttons onClick={() => { navigate('/app/new') }} text={"新增区域"} setColor="white"></Buttons>
          组织名称:
          <Input value="" onChange={(e) => { }}></Input>
          <Buttons
            text={"查询"}
            setColor="white"
            setBackgroundColor="rgb(204, 53, 47)"
            onClick={() => { }}
          ></Buttons>
          <Buttons
            text={"重置"}
            setBackgroundColor="white"
            onClick={() => { }}
          ></Buttons>
        </div>
        <div className="aaa">
          <table className="mxk-tzjgl-table">
            <thead>
              <tr>
                <th>网络名称</th>
                <th>创建时间</th>
                <th>创建人</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {data.map((item: any, index: number) => {
                return (
                  <tr key={index}>
                    <td>{item.wname}</td>
                    <td>{item.wdata}</td>
                    <td>{item.wuser}</td>
                    <td className="mxk-tzjgl-cz">
                      <span onClick={() => { upd(item) }}>编辑</span>
                      <span onClick={() => { del(item) }}>删除</span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}